<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		table{
			margin: 10px auto;width: 80%;border: 1px solid #69c;border-collapse: collapse;
		}
		table tr td,table tr th{
			height: 30px;border: 1px solid #69c;text-align: center;font-size: 12px;
		}
		.yellow{background:yellow;}
		.childdiv{height: 30px;line-height: 30px;}
	</style>
	</head>
	<body>
		<div id="app">
			<table>
<tr>
	<th><childtd>序号</childtd></th>
	<th><childtd>图片名称</childtd></th>
	<th><childtd>价格</childtd></th>
<tr>
	<td><childtd>
	<template>
		<button>{{add}}</button>
		<span>1</span>
		<button>{{del}}</button>
	</template>
	</childtd></td>
	<td><childtd>水浒传</childtd></td>
	<td><childtd>40</childtd></td>
	</tr>
<tr>
	<td><childtd>
	<template>
		<button>{{add}}</button>
		<span>1</span>
		<button>{{del}}</button>
	</template>
	</childtd></td>
	<td><childtd>西游记</childtd></td>
	<td><childtd>40</childtd></td>
	</tr>
<tr>
	<td><childtd>
	<template #childtd1="a">
		<button>{{a.add}}</button>
		<span>1</span>
		<button>{{a.del}}</button>
	</template>
	</childtd></td>
	<td><childtd>红楼梦</childtd></td>
	<td><childtd>40</childtd></td>
	</tr>
<tr>
	<td><childtd>
	<template #childtd1="a">
		<button>{{a.add}}</button>
		<span>1</span>
		<button>{{a.del}}</button>
	</template>
	</childtd></td>
	<td><childtd>三国演义</childtd></td>
	<td><childtd>40</childtd></td>
	</tr>
			</table>
		</div>
		<script>
			
			//组件
			Vue.component('childtd',{
				props:["name"],
				template:"<div v-bind:class='classObj' @mouseover='change()' @mouseout='change()'><slot></slot><slot name='childtd1' :add='childadd' :del='childdel'></slot></div>",
				//template1:"<div><slot name="child2" :value="childadd" :value1="childdel"></slot></div>",
				data:function(){
					return{
						childadd:"加",
						childdel:"减",
						choose:false
					}
				},
				computed:{
					classObj:function(){
						return{
							yellow:this.choose,
							childdiv:true
						}
					}
				},
				methods:{
					change:function(){
						this.choose=!this.choose
					}
				}
			})
			new Vue({
				el:"#app",
				data:{
					add:"+",
					del:"-",
					choose:false,
				},
				methods:{
					change:function(){
						this.choose=!this.choose
					}
				}
			})
		</script>
	</body>
</html>
